<!DOCTYPE HTML>
<html lang="en-US">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title>home</title>
		<meta name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/buijs/lib/latest/bui.css" />
		<link rel="stylesheet" href="css/style.css" />
		 <link rel="stylesheet" type="text/css" href="./css/font.css"/>
	</head>
	<style type="text/css">
		.pan {
			height: 80px;
			box-shadow: 2px 2px 5px #ccc;
			width: 100%;
			border-radius: 8px;

		}

		.index-he {
			background: url(img/bg.2f86eaa8.png) no-repeat;
			background-size: 100%;
		}
	</style>
	<body>
		<div class="bui-page bui-box-vertical">
			<header style="background-image: url(img/bg.2f86eaa8.png);">
				<!--    <div class="bui-bar">
               <div class="bui-bar-left">
                    <a class="bui-btn" onclick="bui.back();"><i class="icon-back"></i></a>
                </div>
                <div class="bui-bar-main">模板页</div>
                <div class="bui-bar-right">
                </div>
            </div> -->

			</header>
			<main>
				<div class="index-he">
					<div class="bui-box-space">
						<div class="span1" style="text-align: center;margin-top: 10px;color: #FFFFFF;">
							<h1>HOME</h1>
						</div>

					</div>
					<div class="span1" style="border-radius: 12px;">
						<div id="slide" class="bui-slide " style="border-radius: 8px;margin-top: 25px;"></div>
					</div>
				</div>

				<div class="bui-box-space example-box3" style="margin-top: 15px;">
					<div class="span1" id="recharge">
						<div class="pan"
							style="padding: 15px; background: url(img/index-01.2337a944.png) no-repeat ;background-size:100%; background-position: -12px -45px;">
							<div style="size: 16sp;">
								<h2 style="">recharge</h2>
							</div>
							<img src="img/right.png" height="30px" style="margin-left: 8px;">
						</div>
					</div>
				
				</div>
				<div class="bui-box-space example-box3" style="margin-top: 15px;">
					<div class="span1" id="myDevice"  href="myDevice.html">
						<div class="pan"
							style="padding: 15px; background: url(img/index-02.29c3e03b.png) no-repeat ;background-size:100%; background-position: -12px -45px;">
							<div style="size: 16sp;">
								<h2 style="">my device</h2>
							</div>
							<img src="img/index-07.png" height="30px" style="margin-left: 8px;">
						</div>
					</div>
					</div>
			
				<div class="bui-box-space example-box3" style="margin-top: 15px;margin-bottom: 15px;">
					<!-- <div class="span1" >
						<div class="pan"
							style="padding: 15px; background: url(img/index-03.b9b517de.png) no-repeat ;background-size:120%; background-position: -10px -10px;">
							<div style="size: 16sp;">
								<h2 style="">lottery</h2>
							</div>
							<div>
								<img src="img/index-07.png" height="30px" style="margin-left: 0px;">
							</div>

						</div>
					</div> -->
					<div class="span1"  id="income" href="myIncome.html">
						<div class="pan"
							style="padding: 15px; background: url(img/index-04.d43431f9.png) no-repeat ;background-size:100%; background-position: -12px -45px;">
							<div style="size: 16sp;">
								<h2 style="">income</h2>
							</div>
							<img src="img/index-07.png" height="30px" style="margin-left: 8px;">
						</div>
					</div>
				</div>
				<div id="slideNote" class="bui-slide bui-slide-notice"  href="newsDetails.html"></div>
				<ul class="bui-list bui-list-thumbnail">
					<li class="bui-btn bui-box" href="newsDetails.html">
						<div class="bui-thumbnail" data-sub=""><img src="img/1.png" alt=""></div>
						<div class="span1">
							<h3 class="item-title">AstraZeneca’s Partners With DocOn to Digitise Healthcare Clinics
								Across India</h3>
							<p class="item-text">AstraZeneca’s Partners With DocOn to Digitise Healthcare Clinics Across
								India</p>
							<p class="item-text">03-08-2021 15:44:57</p>
						</div>
					</li>
					<li class="bui-btn bui-box" href="newsDetails.html">
						<div class="bui-thumbnail" data-sub=""><img src="img/D2PV87LC6@H%60MYOE1J7_Z5M.png"
								style="max-width: 100%;max-height: 100%;" alt=""></div>
						<div class="span1">
							<h3 class="item-title">AstraZeneca in India</h3>
							<p class="item-text">It is our purpose to push the boundaries of science to deliver life
								changing medicines and walk the extra mile to nurture trust, transform the lives of
								patients and the wider community we serve in. We are extremely honoured to be recognized
								as a Great Pla</p>
							<p class="item-text">15-07-2021 15:49:47</p>
						</div>
					</li>
					<li class="bui-btn bui-box" href="newsDetails.html">
						<div class="bui-thumbnail" data-sub=""><img src="img/e40b92e93c4d1f361adc7ce147e377ef.png"
								alt=""></div>
						<div class="span1">
							<h3 class="item-title">AstraZeneca’s Partners With DocOn to Digitise Healthcare Clinics
								Across India</h3>
							<p class="item-text">AstraZeneca’s Partners With DocOn to Digitise Healthcare Clinics Across
								India</p>
							<p class="item-text">15-07-2021 15:49:47</p>
						</div>
					</li>
					<li class="bui-btn bui-box" href="newsDetails.html">
						<div class="bui-thumbnail" data-sub=""><img src="img/1.png" alt=""></div>
						<div class="span1">
							<h3 class="item-title">AstraZeneca’s Partners With DocOn to Digitise Healthcare Clinics
								Across India</h3>
							<p class="item-text">AstraZeneca’s Partners With DocOn to Digitise Healthcare Clinics Across
								India</p>
							<p class="item-text">15-07-2021 15:49:47</p>
						</div>
					</li>
					<li class="bui-btn bui-box" href="newsDetails.html">
						<div class="bui-thumbnail" data-sub=""><img src="img/1.png" alt=""></div>
						<div class="span1">
							<h3 class="item-title">AstraZeneca’s Partners With DocOn to Digitise Healthcare Clinics
								Across India</h3>
							<p class="item-text">AstraZeneca’s Partners With DocOn to Digitise Healthcare Clinics Across
								India</p>
							<p class="item-text">15-07-2021 15:49:47</p>
						</div>
					</li>
					<li class="bui-btn bui-box" href="newsDetails.html">
						<div class="bui-thumbnail" data-sub=""><img src="img/1.png" alt=""></div>
						<div class="span1">
							<h3 class="item-title">AstraZeneca’s Partners With DocOn to Digitise Healthcare Clinics
								Across India</h3>
							<p class="item-text">AstraZeneca’s Partners With DocOn to Digitise Healthcare Clinics Across
								India</p>
							<p class="item-text">15-07-2021 15:49:47</p>
						</div>
					</li>
					<li class="bui-btn bui-box" href="newsDetails.html">
						<div class="bui-thumbnail" data-sub=""><img src="img/1.png" alt=""></div>
						<div class="span1">
							<h3 class="item-title">AstraZeneca’s Partners With DocOn to Digitise Healthcare Clinics
								Across India</h3>
							<p class="item-text">AstraZeneca’s Partners With DocOn to Digitise Healthcare Clinics Across
								India</p>
							<p class="item-text">15-07-2021 15:49:47</p>
						</div>
					</li>
					<li class="bui-btn bui-box" href="newsDetails.html">
						<div class="bui-thumbnail" data-sub=""><img src="img/1.png" alt=""></div>
						<div class="span1">
							<h3 class="item-title">AstraZeneca’s Partners With DocOn to Digitise Healthcare Clinics
								Across India</h3>
							<p class="item-text">AstraZeneca’s Partners With DocOn to Digitise Healthcare Clinics Across
								India</p>
							<p class="item-text">15-07-2021 15:49:47</p>
						</div>
					</li>
				</ul>

			</main>
			<footer>
				<!-- 固定底部   -->
				<ul class="bui-nav">
					<li class="bui-btn bui-box-vertical active">
						<!-- <span class="bui-badges"></span></i> -->
						<img src="img/t-02.png" width="30px" style="margin: 0 auto;">
						<div class="span1">home</div>
					</li>
					<li class="bui-btn bui-box-vertical" href="device.html">
						<img src="img/t-03.png" width="30px" style="margin: 0 auto;">
						<div class="span1">Device</div>
					</li>
					<li class="bui-btn bui-box-vertical" href="wallet.html">
						<img src="img/t-05.png" width="30px" style="margin: 0 auto;">
						<div class="span1">Wallet</div>
					</li>
					<li class="bui-btn bui-box-vertical bui-btn-more" href="team.html">
						<img src="img/t-07.png" width="30px" style="margin: 0 auto;">
						<div class="span1">Team</div>
					</li>
					<li class="bui-btn bui-box-vertical bui-btn-more" href="mine.html">
						<img src="img/t-09.png" width="30px" style="margin: 0 auto;">
						<div class="span1">Mine</div>
					</li>
				</ul>

			</footer>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/buijs/lib/zepto.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/buijs/lib/latest/bui.js"></script>
		<script>
			bui.ready(function() {
				bui.btn({
					id: ".bui-page",
					handle: ".bui-btn"
				}).load();
				// 所有控件及方法需要在这里执行
				$("#recharge").on("click", function(e) {
					bui.load({
						url: "./rechargeCentre.html",
						param: {
							parameter: "parameter"
						}
					});
				})
				$("#myDevice").on("click", function(e) {
					bui.load({
						url: "./myDevice.html",
						param: {
							parameter: "parameter"
						}
					});
				})
				
				$("#income").on("click", function(e) {
					bui.load({
						url: "./myIncome.html",
						param: {
							parameter: "parameter"
						}
					});
				})
				$("#slideNote").on("click", function(e) {
					bui.load({
						url: "./newsDetails.html",
						param: {
							parameter: "parameter"
						}
					});
				})
				// 静态初始化 
				var uiSlide = bui.slide({
					id: "#slide",
					height: 300,
					width: '95%',
					autopage: true,
					loop: true,
					data: [{
						title: "",
						image: "img/3.png",
						url: "",
					}, {
						title: "",
						image: "img/2.png",
						url: "",
					}, {
						title: "",
						image: "img/4.png",
						url: "",
					}]
				})
				// 通知, 自定义模板
				var uiSlide = bui.slide({
					id: "#slideNote",
					height: 100,
					autoplay: true,
					loop: true,
					swipe: false,
					data: [{
						title: "User ****1395 successfully withdraws 2000RS",
						url: ""
					}, {
						title: "User ****2645 successfully withdraws 200RS",
						url: ""
					}, {
						title: "User****9174 activated the LV3 device",
						url: "l"
					}],
					template: function(data) {
						// 自定义模板时,需要自己渲染完整结构
						var html = "";
						html += `<div class="bui-slide-main"><ul>`
						data.forEach(function(item, i) {
							html += `<li href="${item.url}">
			                  <div class="notice-item">
			                      <div class="span1">${item.title||""}</div>
			                  </div>
			              </li>`
						})
						html += `</ul></div>`

						return html;
					},
					direction: "y",
					// 示例跳转前去掉自动播放, 如果不需要自动播放, 模板直接给 href 属性就行, 不用 data-href 
					// callback: function(e) {
					//     var $item = $(e.target).parents("li"),
					//         href = $item.attr("data-href"),
					//         that = this;
					//     bui.load({
					//         url: href,
					//         beforeLoad: function() {
					//             // 跳转前去掉自动播放.
					//             that.stop();
					//         }
					//     })
					// }
				})
				// 异步请求后, 利用 uiSlide.option "data" 的值

				// 后退的时候,清除掉自动播放
				function beforeBack(e) {

					if (e.target.pid == "pages/ui_controls/bui.slide_note") {
						// 禁止自动播放
						uiSlide.stop();
						// 去掉实例缓存
						uiSlide = null;
					}
				}

				// 示例后退以后清除掉实例, 每次进来都会增加
				//     if (router.handle["beforeback"]) {
				//         var hasHandle = false;
				//         router.handle["beforeback"].forEach(function(item) {
				//             // 如果 function 的名称相同,则不用再增加
				//             if (item.name === "beforeBack") {
				//                 hasHandle = true;
				//                 return hasHandle;
				//             }
				//         })

				//         // 第一次增加
				//         !hasHandle && router.on("beforeback", beforeBack)
				//     } else {
				//         // 第一次增加
				//         router.on("beforeback", beforeBack)
				//     }

			})
		</script>
	</body>
</html>
